<!--suppress ALL -->
<template>
    <div class="derp">
        <div class="topnone">
        </div>
        <section class="normalshwoinfo" v-if="friends.length==0">
            <div class="hbinfo" v-if="over">
                <p class="tips">
                    <strong>您来晚了</strong>
                    <b>活动结束了还没等到您</b>
                </p>
                <p class="fail">
                    <img src="../../svg/fail.svg" alt="">
                </p>
            </div>
            <div class="hbinfo" v-else-if="start&&hasgetMoney">
                <p class="tips" v-if="hasgetMoney!==1.1">
                    <strong>恭喜您</strong>
                    <b>成功抢到红包</b>
                </p>
                <p class="tips" v-else>
                    <strong>您来晚了</strong>
                    <b>送您一个阳光普照红包</b>
                </p>
                <span class="center">
                    <aside :class="animie">
                        <i>￥</i>
                        <strong>{{hasgetMoney}}</strong>
                    </aside>
                </span>
                <a class="btn" href="javascript:;" @click="jumphb">立即查看</a>
            </div>
            <div class="hbinfo" v-else>
                <p class="tips">
                    <strong>11月11日</strong>
                    <b>11点11分开抢</b>
                </p>
                <span class="bottom">
                    最高抢1111元红包 <br>
                    人人有奖
                </span>
            </div>
            <p class="middletips" v-if="over">别灰心，下次赶早吧</p>
            <p class="middletips" v-else>{{(start&&hasgetMoney)?'邀请5位好友助力，还能再得11元红包':''}}</p>
            <p class="copyp" v-show="copyurl&&!over"><input type="text" id="cp" v-model="copyurl">
                <button data-clipboard-target="#cp"
                        class="singlecopy">选中链接
                </button>
            </p>
            <button class="intivefriends" v-if="over" @click="jumphome">去首页</button>
            <button class="intivefriends" id="copyele" data-clipboard-target="#cp" v-else @click="getredpackg">
                {{start?(hasgetMoney?'邀请好友助力':'立即开抢'):countTime}}
            </button>
        </section>
        <section class="showfriends" v-else>
            <div class="hbinfo">
                <dl>
                    <dd v-for="(item, key,index) in 5" :key="index">
                        <img :src="friends[item-1]?friends[item-1]['FaceUrl']||'//common-1253410441.file.myqcloud.com/coverimg/20170621164206.png':'//common-1253410441.file.myqcloud.com/activityimg/20171110191009.png'"
                             alt="助力">
                        <strong>{{friends[item-1]?friends[item-1]['Name']:'空缺'}}</strong>
                    </dd>
                </dl>

            </div>
            <p class="middletips">已有<strong>{{friends.length}}</strong>位好友助力</p>
            <p class="getmoney" v-if="friends.length>=5">已获<strong>11</strong>元助力红包</p>
            <button v-else class="intivefriends" @click="getredpackg" data-clipboard-target="#foo">邀请好友助力</button>
        </section>
        <section class="winrecordsection" v-if="hasgetMoney||over">
            <div class="breakblank">
                <img src="http://common-1253410441.file.myqcloud.com/activityimg/20171107153141.png" alt="">
            </div>
            <div class="winrecords">
                <ul>
                    <li v-for="(item, key,index) in winrecords" :key="index" v-if="key<5">
                    <span>
                        <img :src="item.FaceUrl||'//common-1253410441.file.myqcloud.com/coverimg/20170621164206.png'"
                             alt=""><strong>{{item.Name}}</strong>
                    </span>
                        <b>{{item.Money}}元</b>
                    </li>
                </ul>
                <button class="checkmore" @click="showwinmodal=true">点击查看更多</button>
            </div>
        </section>

        <div class="breakblank">
            <img src="http://common-1253410441.file.myqcloud.com/activityimg/20171107153142.png?v=1" alt="">
        </div>
        <div class="introinfo">
            <p>
                <label>1</label>
                <span>11月11日 11点11分准时开抢</span>
            </p>
            <p>
                <label>2</label>
                <span>可抢红包面额有1111元、111元、11元，所发放红包不限购买金额门槛，就是这么给力
                    <table style="border-collapse: collapse;">
                        <thead>
                            <tr><td>红包面值</td><td>红包数量</td><td>使用彩种</td></tr>
                        </thead>
                        <tbody>
                            <tr><td>1111</td><td>1</td><td>竞彩、快开彩</td></tr>
                            <tr><td>111</td><td>11</td><td>竞彩、快开彩</td></tr>
                            <tr><td>11</td><td>111</td><td>全部彩种</td></tr>
                        </tbody>

                    </table>
                    <strong>红包数量有限，手快有，手慢无哦~</strong>
                </span>

            </p>
            <p>
                <label>3</label>
                <span>手慢的亲们每人可领1.1元红包，参与活动全民有奖</span>
            </p>
            <p>
                <label>4</label>
                <span>每位参与用户皆可邀请好友助力，在11日23点59分之前成功邀请5位好友，还可再得11元。</span>
            </p>
            <p>
                <label>5</label>
                <span>本活动解释权归本APP所有，若有疑问请联系客服</span>
            </p>
        </div>
        <div v-if="showwinmodal" class="winrecordsmodal">
            <div>
                <img src="http://common-1253410441.costj.myqcloud.com/activityimg/20171103145542.png?v=123" alt="">
                <i @click="showwinmodal=false"></i>
            </div>
            <section>
                <ul>
                    <li v-for="(item, key,index) in winrecords" :key="index">
                    <span>
                        <img :src="item.FaceUrl||'//common-1253410441.file.myqcloud.com/coverimg/20170621164206.png'"
                             alt=""><strong>{{item.Name}}</strong>
                    </span>
                        <b>{{item.Money}}元</b>
                    </li>
                </ul>
            </section>
        </div>
        <input id="foo" class="none" v-model="copyurl">
    </div>
</template>

<script>
    import {Toast, Alert, AlertPlugin} from 'vux';
    import {getMytoken, getLogintoken} from '../../services/common';
    import {Countdown} from '../../utils/timer';
    import {nativetonative, h5tonative} from '../../utils/otherfn';
    import {namesource, jumptype} from '../../utils/config/common';
    import VueClipboard from 'vue-clipboard2';
    import Clipboard from 'clipboard';

    Vue.use(VueClipboard);
    Vue.use(AlertPlugin);
    import axios from 'axios';
    export default {
        components: {
            Toast,
            Alert
        },
        data() {
            return {
                showwinmodal: false,
                start: true,
                hasgetMoney: 0,
                countTime: `11月11日11点11分开抢`,
                winrecords: [],
                animie: false,
                friends: [],
                copyurl: '',
                over: false
            };
        },
        watch: {},
        created() {
            this.getdata();
            this.getwinliests();
            this.getinfo();
        },
        mounted: async function () {
            const {token, EncryptUserID, appCode, channel} =await getMytoken(true);
            if(token) {
                let url = `${location.origin}/tg/#/eleven/share?eid=${encodeURIComponent(EncryptUserID)}&appCode=${appCode}&channel=${channel}`;
                this.copyurl = url;
                const clipboard = new Clipboard('#copyele');
                const clipboard2 = new Clipboard('.singlecopy');
            }
        },
        computed: {},
        methods: {
            getredpackg: async function () {
                if(!this.start) {
                    return;
                }
                if(!this.hasgetMoney) {
                    const {token}=await getMytoken(true);
                    if(token) {
                        const {data}= await axios.get(`/hd/Handler.ashx?action=1144&params={"UserCode":"${token}"}`);
                        if(data && data.code === 0) {
                            this.hasgetMoney = data.data.Money;
                            setTimeout(()=> {
                                this.animie = 'transformstart';
                            }, 300);
                            if(this.friends.length === 0) {
                                this.getwinliests();
                            }
                        }
                        else {
                            this.$vux.toast.show({
                                type: 'text',
                                text: data.msg
                            })
                        }
                    }
                    else {
                        getLogintoken(function (value) {
                            console.log('vvv', value);
                            if(value) {
                                location.reload();
                            }
                        }).then(({token})=> {
                        })
                    }
                } else {
                    const {token, EncryptUserID, appCode, channel} =await getMytoken();
                    let url = `${location.origin}/tg/#/eleven/share?eid=${encodeURIComponent(EncryptUserID)}&appCode=${appCode}&channel=${channel}`;
                    this.$copyText(url).then(()=> {
                        this.$vux.alert.show({
                            title: '助力链接复制成功',
                            content: '选择好友粘贴邀请助力吧~',
                        })
                    }, (e)=> {
                        this.copyurl = url;
                        this.$vux.alert.show({
                            title: '助力链接复制成功',
                            content: '选择好友粘贴邀请助力吧~,若没复制成功,请手动复制',
                        })
                    })
                }

            },
            getinfo: async function () {
                if(!this.start) {
                    return;
                }
                const {token, EncryptUserID}=await getMytoken(true);
                if(!this.hasgetMoney) {
                    if(token) {
                        const {data}= await axios.get(`/hd/Handler.ashx?action=1145&params={"UserCode":"${token}"}`);
                        if(data && data.code === 0) {
                            this.hasgetMoney = data.data.Money;
                            if(data.data.Money) {
                                const {data}= await axios.get(`/hd/Handler.ashx?action=1147&params={"ID":"${EncryptUserID}"}`);
                                if(data && data.code === 0) {
                                    this.friends = data.data;
                                }
                            }
                            setTimeout(()=> {
                                this.animie = true;
                            }, 300)
                        }
                    }
                    else {

                    }
                } else {
                    if(token) {
                        const {data}= await axios.get(`/hd/Handler.ashx?action=1147&params={"UserCode":"${token}"}`);
                        if(data && data.code === 0) {

                        }
                    }
                    else {

                    }
                }
            },
            jumphome(){
                nativetonative('home');
            },
            jumphb(){
                h5tonative('我的红包', `${location.origin}/#/my/redenvelop`);
            },
            getwinliests: async function () {
                const {data}= await axios.get(`/hd/Handler.ashx?action=1146&params={}`);
                if(data && data.code === 0) {
                    this.winrecords = data.data;
                }
                else {
                    this.$vux.toast.show({
                        type: 'text',
                        text: data.msg
                    })
                }

            },
            getdata: async function () {
                const {data}= await axios.get('/master/system/time');
                if(data && data.code === 0) {
                    let startdata = new Date('2017/11/10 23:59:59')
                            , endtime = new Date('2017/11/11 11:11:00')
                            , stoptime = new Date('2017/11/11 23:59:59')
                            , datanow = new Date(data.data.timestamp);
                    if(datanow < endtime && datanow > startdata) {
                        let countdowns = new Countdown(endtime - datanow, (data, isend)=> {
                            if(isend) {
                                this.start = true;
                            }
                            else {
                                this.countTime = `${data[0]}天${data[1]}时${data[2]}分${data[3]}秒`;
                            }
                        }, 3);
                        countdowns.start();
                        return;
                    }
                    if(datanow > endtime && datanow < stoptime) {
                        this.start = true;
                        this.getinfo();
                        return;
                    }
                    if(datanow > stoptime) {
                        this.start = false;
                        this.over = true;
                    }
                }
                else {
                    this.countTime = `11月11日11点11分开抢`;
                }
            }
        }
    }
</script>
<style scoped lang="less" rel="stylesheet/less">
    .derp {
        background: url(//common-1253410441.file.myqcloud.com/activityimg/20171107152022.png?v=1) no-repeat top center #6d00bd;
        background-size: contain;
        padding-bottom: 40px;
    }

    .topnone {
        height: 450px;
    }

    .normalshwoinfo {
        .hbinfo {
            height: 424px;
            width: 540px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .tips {
                text-align: center;
                color: #fff;
                line-height: 1;
                strong {
                    margin-top: 40px;
                    font-size: 46px;
                    display: block;
                }
                b {
                    margin-top: 10px;
                    font-size: 36px;
                    display: block;
                }
            }
            .center {
                flex: 1;
                display: flex;
                aside {
                    transition: 1s;
                    transform-style: preserve-3d;
                    width: 143px;
                    height: 143px;
                    border-radius: 50%;
                    align-self: center;
                    background: #f1eb86;
                    box-shadow: 0 5px 0 #c7b623;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    color: #c72a23;
                    line-height: 1;
                    &.transformstart {
                        transform: rotateY(1440deg);
                    }
                    i {
                        font-size: 36px;
                    }
                    strong {
                        font-size: 48px;
                        font-weight: bold;
                    }
                }
            }
            .btn {
                height: 86px;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #f1eb86;
                font-size: 36px;
            }
            .fail {
                text-align: center;
                margin-top: 30px;
                width: 300px;
                img {
                    width: 200px;
                }
            }
            .bottom {
                text-align: center;
                font-size: 32px;
                color: #fdff4d;
                margin-top: 80px;
            }
        }
        .middletips {
            font-size: 36px;
            text-align: center;
            color: #fff;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .intivefriends {
            width: 538px;
            height: 130px;
            background: linear-gradient(to bottom, #fdee77, #ffc915);
            border-radius: 20px;
            font-size: 42px;
            color: #740101;
            margin: 0 auto;
            display: block;
            text-align: center;
        }
    }

    .breakblank {
        img {
            width: 100%;
            display: block;
        }
        margin-top: 60px;
    }

    .showfriends {
        height: 655px;
        .hbinfo {
            height: 424px;
            width: 540px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            dl {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-wrap: wrap;
                height: 300px;
                dd {
                    display: flex;
                    justify-content: center;
                    flex-direction: column;
                    align-items: center;
                    width: 160px;
                    height: 140px;
                    img {
                        width: 78px;
                        height: 78px;
                        box-sizing: border-box;
                        border: 1px solid #f1eb86;
                        border-radius: 50%;
                        display: block;
                        line-height: 78px;
                        text-align: center;
                        background: #e1e1e1;
                        color: #aaa;
                    }
                    strong {
                        font-size: 28px;
                        color: #fff;
                        line-height: 1;
                        margin-top: 16px;
                    }
                }
            }
        }
        .middletips {
            font-size: 36px;
            text-align: center;
            color: #fff;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
            strong {
                color: #ffff00;
                font-weight: bold;
            }
        }
        .getmoney {
            font-size: 42px;
            text-align: center;
            color: #fff;
            margin-top: 70px;
            strong {
                font-weight: bold;
                color: #e04031;
            }
        }
        .intivefriends {
            width: 538px;
            height: 130px;
            background: linear-gradient(to bottom, #fdee77, #ffc915);
            border-radius: 20px;
            font-size: 42px;
            color: #740101;
            margin: 0 auto;
            display: block;
            text-align: center;
        }
    }

    .blanknone {
        height: 183px;
    }

    .winrecords {
        width: 664px;
        margin: 0 auto;
        color: #fff;
        display: flex;
        background: rgba(52, 0, 67, 0.6);
        box-sizing: border-box;
        padding: 0 40px;
        padding-bottom: 30px;
        flex-direction: column;
        border-radius: 10px;
        margin-bottom: 54px;
        ul {
            flex: 1;
            li {
                width: 100%;
                height: 96px;
                box-sizing: border-box;
                border-top: 1px dashed #fff;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 28px;
                &:first-child {
                    border-top: none;
                }
                span {
                    flex: 1;
                    align-items: center;
                    display: flex;
                    img {
                        width: 58px;
                        height: 58px;
                        margin-right: 16px;
                        border-radius: 50%;
                        display: inline-block;
                    }
                    strong {
                        align-self: center;
                    }
                }
            }
        }
        .checkmore {
            font-size: 32px;
            color: #fdff4d;
            background: none;
            font-weight: bold;
        }
    }

    .blanknoneruls {
        height: 204px;
    }

    .showfriends {

    }

    .introinfo {
        font-size: 26px;
        color: #fff;
        width: 664px;
        margin: 0 auto;
        box-sizing: border-box;
        padding: 34px 40px 30px 20px;
        border-radius: 10px;
        background: rgba(52, 0, 67, 0.6);
        p {
            font-size: 26px;
            margin-top: 40px;
            font-weight: bold;
            &:first-child {
                margin-top: 0;
            }
            label {
                width: 30px;
                height: 28px;
                border-radius: 4px;
                background: #d2352a;
                display: inline-block;
                text-align: center;
                line-height: 30px;
                margin-right: 20px;
                float: left;
                margin-top: 4px;
            }
            span {
                display: flex;
                flex-direction: column;
                img {
                    width: 400px;
                    height: 200px;
                    display: block;
                    margin: 0 auto;
                    margin-top: 10px;
                }
                table {
                    width: 100%;
                    margin: 0 auto;
                    margin-top: 20px;
                    font-size: 26px;
                    overflow: hidden;
                    thead {
                        background: #943da7;
                        color: #fff;
                        td {
                            font-weight: bold;
                        }
                    }
                    tbody {
                        tr {
                            background: #dbdbdb;
                            color: #450066;
                        }
                    }
                    td {
                        border: 1px solid #450066;
                        height: 50px;
                        text-align: center;
                    }
                }
                strong {
                    color: #d2352a;
                    text-align: center;
                    line-height: 1;
                    margin-top: 32px;
                }
            }
        }
    }

    .winrecordsmodal {
        position: fixed;
        width: 100%;
        left: 0;
        top: 0;
        height: 100%;
        background: rgba(0, 0, 0, .6);
        div {
            position: relative;
            margin-top: 10%;
            i {
                position: absolute;
                width: 64px;
                top: 0;
                right: 60px;
                height: 64px;
            }
            img {
                width: 100%;
                display: block;
            }
        }

        section {
            background: #943da7;
            color: #fff;
            overflow: scroll;
            width: 664px;
            margin: 0 auto;
            box-sizing: border-box;
            border-radius: 12px;
            padding: 0 38px;
            max-height: 700px;
            -webkit-overflow-scrolling: touch;
            ul {
                flex: 1;
                background: #943da7;
                li {
                    width: 100%;
                    height: 96px;
                    box-sizing: border-box;
                    border-top: 1px dashed #fff;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 28px;
                    &:first-child {
                        border-top: none;
                    }
                    span {
                        flex: 1;
                        align-items: center;
                        display: flex;
                        img {
                            width: 58px;
                            height: 58px;
                            margin-right: 16px;
                            border-radius: 50%;
                            display: inline-block;
                        }
                        strong {
                            align-self: center;
                        }
                    }
                }
            }
        }
    }

    body .weui-dialog__bd {
        -webkit-user-select: all;
        user-select: all;
    }

    #foo {
        width: 100%;
        height: 30px;
        border: none;
    }

    .copyp {
        text-align: center;
        margin-bottom: 20px;
        #cp {
            height: 50px;
        }

        .singlecopy {
            height: 50px;
            width: 160px;
            background: linear-gradient(to bottom, #fdee77, #ffc915);
        }
    }

</style>